<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        Velocity 和 jQuery.animate的工作方式类似，也是用来实现JavaScript动画的一个很棒的选择
     -->
    <div id="app">
      <button @click="show=!show">Toggle</button>
      <span>{{show}}</span>
      <transition appear
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <p v-if="show">Done</p>
      </transition>
    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.js"></script>

    <script>
      new Vue({
        el: "#app",
        data: {
          show: true,
        },
        methods: {
          beforeEnter: function (el) {
            el.style.opacity = 0;
            el.style.transformOrigin = "left";
          },
          enter: function (el, done) {
            Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
            Velocity(el, { fontSize: "1em" }, { complate: done });
          },
          leave: function (el, done) {
            Velocity(
              el,
              { translationX: "15px", rotateZ: "50deg" },
              { duration: 600 }
            );
            Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
            Velocity(
              el,
              {
                rotateZ: "45deg",
                translationX: "30px",
                translationY: "30px",
                opacity: 1,
              },
              { complate: done }
            );
          },
        },
      });
    </script>
  </body>
</html>
